<template>
  <div
    v-loading.fullscreen="loading"
    class="page-screens"
    @click="
      dialogVisiable = false;
      rankDialog = false;
      zoufangDialog = false;
      zxtjwtDialog =false;
      zxbjwtDialog = false;
      cswbjDialog =false;
    "
  >
    <div class="data">
      <div class="data-title">
        <div class="title-left fl"></div>
        <div class="title-center fl">广西实体经济调研服务数据</div>
        <div class="title-right fr"></div>
      </div>
      <div class="data-content">
        <div class="con-left fl">
          <div class="left-top">
            <div
              class="info"
              @click.stop="
                !dialogVisiable;
                rankDialog = false;
              "
            >
              <div class="info-title">八大服务重点问题统计</div>
              <img src="../assets/bj-1.png" alt="" class="bj-1" />
              <img src="../assets/bj-2.png" alt="" class="bj-2" />
              <img src="../assets/bj-3.png" alt="" class="bj-3" />
              <img src="../assets/bj-4.png" alt="" class="bj-4" />
              <div class="navboxall" ref="echart55"></div>
            </div>

            <div
              class="dialog"
              @click.stop
              ref="dialog"
              v-if="dialogVisiable"
              :style="{ left: xAxis + 'vw', top: yAxis + 'px' }"
            >
              <div class="fix-top">
                <fixtop ref="fixtop" :eightGreatnum="eightGreatnum"></fixtop>
              </div>
            </div>

            <div class="top-bottom">
              <div class="tihead">
                <div class="title">调研服务小组办结率排名</div>
                <!-- <div class="title">办结率排名</div> -->

                <div
                  class="tiright"
                  @click.stop="!rankDialog"
                  @click="Fundaiig"
                >
                  详情>>
                </div>
              </div>
              <img src="../assets/bj-1.png" alt="" class="bj-1" />
              <img src="../assets/bj-2.png" alt="" class="bj-2" />
              <img src="../assets/bj-3.png" alt="" class="bj-3" />
              <img src="../assets/bj-4.png" alt="" class="bj-4" />
              <table
                class="table1"
                width="100%"
                border="0"
                cellspacing="0"
                cellpadding="0"
              >
                <!-- <tbody> -->

                <colgroup>
                  <col width="15%" />
                  <col width="30%" />
                  <col width="15%" />
                  <col width="20%" />
                  <col width="20%" />
                </colgroup>
      
                <thead style="color: white;">
                  <th>排名</th>
                  <th style="text-align: center;">服务小组名称</th>
                  <!-- <th style="text-align: center;">城市</th> -->

                  <th>总数</th>
                  <th>办结数</th>
                  <th>办结率</th>
                </thead>
              </table>

              <vue-seamless-scroll
                :data="rateScrollList"
                :class-option="optionSetting"
                class="seamlessWarp"
              >
              <!-- <div class="seamlessWarp"> -->
                <ul>
                  <li
                    v-for="(item, i) in rateScrollList"
                    :key="i"
                    class="liStyle"
                  >
                    <span v-if="i + 1 == 1" class="title1 text_align"
                      ><div class="fTitle" style="background-color: #ed405d">
                        {{ i + 1 }}
                      </div></span
                    >
                    <span v-else-if="i + 1 == 2" class="title1 text_align"
                      ><div class="fTitle" style="background-color: #f78c44">
                        {{ i + 1 }}
                      </div></span
                    >
                    <span v-else-if="i + 1 == 3" class="title1 text_align"
                      ><div class="fTitle" style="background-color: #49bcf7">
                        {{ i + 1 }}
                      </div></span
                    >
                    <span v-else class="title1 text_align"
                      ><div class="fTitle">{{ i + 1 }}</div></span
                    >

                    <span class="title1 text_align">{{ item.name }}</span>
                    <span class="title1 text_align">{{ item.allCount }}</span>
                    <!-- <span class="title1 text_align">{{ item.countAll }}</span> -->

                    <span class="title1 text_align">{{
                      item.countStatus5
                    }}</span>
                    <span class="title1 text_align"
                      >{{ item.bRate.toFixed(0) }}%</span
                    >
                  </li>
                </ul>
                <!-- </div> -->
              </vue-seamless-scroll>
            </div>
            <div
              class="rankDialog"
              @click.stop
              ref="rankDialog"
              v-if="rankDialog"
              :style="{ left: xAxis + 'vw', top: y + 'vh' }"
            >
              <rank></rank>
            </div>
            <!--123456  -->
          </div>

          <div class="left-bottom">
            <div class="tihead">
                <div class="title">走访排名</div>
                 
                <div class="tiright" @click="Funzoufang"  @click.stop="!zoufangDialog">详情>></div>
            </div>
            <img src="../assets/bj-1.png" alt="" class="bj-1" />
            <img src="../assets/bj-2.png" alt="" class="bj-2" />
            <img src="../assets/bj-3.png" alt="" class="bj-3" />
            <img src="../assets/bj-4.png" alt="" class="bj-4" />
            <div id="echarts_5" class="charts" ref="echarts_5"></div>
          </div>
            <div
              class="zoufangDialog"
              @click.stop
              ref="zoufangDialog"
              v-if="zoufangDialog"
              :style="{ left: xAxis + 'vw', top: '-87.5vh' }"
            >
              <zfxq></zfxq>
            </div>
        </div>
        <div class="con-center fl">
          <div class="map-num pulll_left" style="cursor: pointer">
            <div>
              <p>实时走访总数量</p>
              <div class="num">
                <span
                  class="span"
                  v-for="(item, index) in this.nList"
                  :key="index"
                  >{{ item }}</span
                >
              </div>
            </div>
            <div class="pulll_right zhibiao">
              <div class="zb1">
                <span>本年走访数</span>
                <div id="zb1" ref="zb1"></div>
              </div>
              <div class="zb2">
                <span>本月走访数</span>
                <div id="zb2" ref="zb2"></div>
              </div>
              <div class="zb3">
                <span>本周走访数</span>
                <div id="zb3" ref="zb3"></div>
              </div>
            </div>
            <div class="cander">
              <fixleft></fixleft>
            </div>
          </div>

          <div class="cen-top" id="map" ref="map"></div>
          <div class="cen-bottom">
            <div class="title">企业分类走访趋势图</div>
            <img src="../assets/bj-1.png" alt="" class="bj-1" />
            <img src="../assets/bj-2.png" alt="" class="bj-2" />
            <img src="../assets/bj-3.png" alt="" class="bj-3" />
            <img src="../assets/bj-4.png" alt="" class="bj-4" />
            <!-- <div id="echarts_3" class="charts"></div> -->
            <div class="charts" id="echart33" ref="echart33"></div>
          </div>
        </div>

        <div class="con-right fr">
          <div v-if="zxtjwtDialog" class="zxtjwtDialog" ref="zxtjwtDialog" @click.stop :style="{ left:'-74vw', top:'0vh' }"><zxtjwt></zxtjwt></div>
          <div v-if="zxbjwtDialog" class="zxbjwtDialog" ref="zxbjwtDialog" @click.stop :style="{ left:'-74vw', top:'0vh' }"><zxbjwt></zxbjwt></div>
          <div v-if="cswbjDialog" class="cswbjDialog" ref="cswbjDialog" @click.stop :style="{ left:'-74vw', top:'0vh' }"><cswbj></cswbj></div>

          <div class="right-top">
            <div class="title">
               <div>最新提交问题</div>
               <div class="tilx" @click="FunzxtjwtDialog" @click.stop="!zxtjwtDialog">详情>></div>
            </div>
            <img src="../assets/bj-1.png" alt class="bj-1" />
            <img src="../assets/bj-2.png" alt class="bj-2" />
            <img src="../assets/bj-3.png" alt class="bj-3" />
            <img src="../assets/bj-4.png" alt class="bj-4" />
            <div class="wraptit">
              <span>状态</span>
              <span>标题</span>
              <span>企业名称</span>
            </div>
            <div class="wrap">
              <vue-seamless-scroll
                :data="submitScrollList"
                class="seamless-warp"
                :class-option="optionSetting"
              >
                <li v-for="(item, i) in submitScrollList" :key="i" :id="i">
                  <p>
                    <span  :class="[item.status=='已办结'?'qq':'',item.status=='处理中'?'ww':'',item.status=='已提交'?'ww':'',item.status=='待提交'?'ww':'',item.status=='已退回'?'ww':'']">{{ item.status }}</span>
                    <span>{{ item.title }}</span>
                    <span>{{ item.corpName }}</span>
                  </p>
                </li>
              </vue-seamless-scroll>
            </div>
          </div>

          <div class="right-center">
            <div class="title">
               <div>最新办结问题</div>
               <div class="tilx"  @click="FunzxbjwtDialog" @click.stop="!zxbjwtDialog">详情>></div>

            </div>
            <img src="../assets/bj-1.png" alt="" class="bj-1" />
            <img src="../assets/bj-2.png" alt="" class="bj-2" />
            <img src="../assets/bj-3.png" alt="" class="bj-3" />
            <img src="../assets/bj-4.png" alt="" class="bj-4" />

            <div class="wraptit">
              <span>状态</span><span>标题</span><span>企业名称</span>
            </div>
            <div class="wrap">
              <vue-seamless-scroll
                :data="endScrollList"
                class="seamless-warp"
                :class-option="optionSetting"
              >
                <li v-for="(item, i) in endScrollList" :key="i" :id="i">
                  <p>
                    <span class="qq">{{ item.status }}</span>
                    <span>{{ item.title }}</span>
                    <span>{{ item.corpName }}</span>
                  </p>
                </li>
              </vue-seamless-scroll>
            </div>
          </div>

          <!-- timeoutScrollList -->

          <div class="right-bottom">
            <div class="title">
               <div>超时未办结</div>
               <div class="tilx"  @click="FuncswbjDialog" @click.stop="!cswbjDialog">详情>></div>

            </div>
            <img src="../assets/bj-1.png" alt="" class="bj-1" />
            <img src="../assets/bj-2.png" alt="" class="bj-2" />
            <img src="../assets/bj-3.png" alt="" class="bj-3" />
            <img src="../assets/bj-4.png" alt="" class="bj-4" />
            <div class="wraptit">
              <span class="abc">超时天数</span><span>标题</span><span>企业名称</span>
            </div>
            <div class="wrap">
              <vue-seamless-scroll
                :data="timeoutScrollList"
                class="seamless-warp"
                :class-option="optionSetting"
              >
                <li v-for="(item, i) in timeoutScrollList" :key="i" :id="i">
                  <p>
                    <span class="ee">{{ item.cday }}</span>
                    <span>{{ item.title }}</span>
                    <span>{{ item.corpName }}</span>
                  </p>
                </li>
              </vue-seamless-scroll>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import env from "../env";
import fixtop from "../components/fixtop";
import fixleft from "../components/fixleft";
import rank from "../components/rank";
import zfxq from "../components/zfxq";
import zxtjwt from "../components/zxtjwt";
import zxbjwt from "../components/zxbjwt";
import cswbj from "../components/cswbj";

import mixin from "../mixin";

import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "page-screens",
  title: "驾驶舱",
  ip: env.ip,
  nodes: [],
  childs: [],
  mixins: [mixin],

  data() {
    return {
      nList: [],
      a: "",
      xAxis: 23.8,
      yAxis: 0,
      y: -62.5,
      dialogVisiable: false,
      rankDialog: false,
      zxbjwtDialog:false,
      cswbjDialog:false,
      zxtjwtDialog:false,
      zoufangDialog:false,
      submitScrollList: [],
      endScrollList: [],
      timeoutScrollList: [],
      rateScrollList: [],
      eightGreatnum: [],
      timer: "",
    };
  },
  components: {
    vueSeamlessScroll,
    fixtop,
    fixleft,
    rank,
    zfxq,
    cswbj,
    zxbjwt,
    zxtjwt,
  },
  computed: {
    optionSetting() {
      return {
        step: 0.1, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        autoPlay: true, // 是否自动滚动
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        openTouch: true,
        zhou: 0,
        yue: 0,
        nian: 0,
      };
    },
  },
  methods: {
    init() {
      if (this.loading) return;
    },
    Funzoufang(){
        this.zoufangDialog =true;
        this.rankDialog = false;
    },
    FuncswbjDialog(){
      this.cswbjDialog = true;
      this.zxbjwtDialog = false;
        this.zxtjwtDialog =false;

    },
    FunzxtjwtDialog(){
      this.zxbjwtDialog = false;
        this.zxtjwtDialog =true;
      this.cswbjDialog = false;

    },
    FunzxbjwtDialog(){
        this.zxtjwtDialog =false;
      this.cswbjDialog = false;

      this.zxbjwtDialog = true;
    },
    Fundaiig() {
      this.rankDialog = true;
      this.dialogVisiable = false;
      this.zoufangDialog = false
    },
    echarts_55() {
      this.$nextTick(async () => {
        var myChart = this.$echarts.init(this.$refs.echart55);
        var minCount;
        var maxCount;
        var dataName = [];
        var dataCount = [];

        await this.plugins.user.getEightData().then((res) => {
          res.data.sort(function (a, b) {
            return a.count - b.count;
          });
          //   var tempLength=res.data.length
          minCount = res.data[0].count;
          maxCount = res.data[res.data.length - 1].count;

          res.data.forEach((item) => {
            dataName.push(item.name);
            dataCount.push(item.count);
          });
        });

        var lightBlue = {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(41, 121, 255, 1)",
            },
            {
              offset: 1,
              color: "rgba(0, 192, 255, 1)",
            },
          ],
          globalCoord: false,
        };

        var option = {
          tooltip: {
            show: false,
          },
          grid: {
            top: "0%",
            left: "100",
            right: "14%",
            bottom: "0%",
          },
          xAxis: {
            min: 0,
            max: maxCount,
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
          },
          yAxis: {
            // data: ['招商引资服务', '政策落地兑现', '复工复产保障', '管理信息咨询服务', '企业创新升级服务', '市场开拓', '用能用工保障', '融资服务'],  dataName
            data: dataName,
            //offset: 15,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "white",
              fontSize: 14,
            },
          },
          series: [
            {
              type: "bar",
              label: {
                show: true,
                zlevel: 10000,
                position: "right",
                // padding: 10,
                color: "#49bcf7",
                fontSize: 14,
                formatter: "{c}",
              },
              itemStyle: {
                color: "#49bcf7",
              },
              barWidth: "15",
              // data: [49, 80, 67, 99, 12, 19, 39, 84,], dataCount
              data: dataCount,
              z: 10,
            },
            {
              type: "bar",
              barGap: "-100%",
              itemStyle: {
                color: "#fff",
                opacity: 0.1,
              },
              barWidth: "15",
              // data: [100, 100, 100, 100, 100, 100, 100, 100,],
              z: 5,
            },
          ],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option,true);
        myChart.on("click", (params) => {
          this.plugins.user.geteightGreatnum(params.name).then((res) => {
            this.aa = params.name;
            this.eightGreatnum = res.data;
            this.$nextTick(() => {
              this.$refs.fixtop.initData();
            });
          });
          this.dialogVisiable = true;
          // this.xAxis =this.$refs.echart55.offsetWidth+25;
        });
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },

    echarts_5() {
      // 基于准备好的dom，初始化echarts实例
      this.$nextTick(async () => {
        let myChart = this.$echarts.init(this.$refs.echarts_5);

        var personalName = [];
        var personalCount = [];

        await this.plugins.user.getVisitsList().then((res) => {
          personalCount = [];
          res.data.sort(function (a, b) {
            return b.count - a.count;
          });
          res.data.forEach((item) => {
            personalName.push(item.fwxz);
            personalCount.push(item.count);
          });
        });

        // personalCount=[17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1]

        var xData = (function () {
          // var data = ['NO.1', 'NO.2', 'NO.3', 'NO.4', 'NO.5'];   personalCount
          var data = personalName;
          return data;
        })();

        // var data = [28, 22, 20, 16, 12]
        var data = personalCount;
        var option = {
          // backgroundColor: "#141f56",

          // 底部Zoom
          // dataZoom: [
          //   {
          //     show: true,
          //     realtime: true,
          //     height: 12, //这里可以设置dataZoom的尺寸
          //     bottom: 4,	//滚动体距离底部的距离
          //     start: 0,  //初始化时，滑动条宽度开始标度
          //     end: 28, //初始化时，滑动条宽度结束标度
          //   },
          //   {
          //     type: "inside", //内置滑动，随鼠标滚轮展示
          //     realtime: true,
          //     start: 0,
          //     end: 28,
          //   },
          // ],

          tooltip: {
            show: "true",
            trigger: "item",
            backgroundColor: "rgba(0,0,0,0.4)", // 背景
            padding: [8, 10], //内边距
            // extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
            formatter: function (params) {
              if (params.seriesName != "") {
                // return params.name + ' ：  ' + params.value + ' 辆';
                return params.name + " ：  " + params.value;
              }
            },
          },
          grid: {
            borderWidth: 0,
            top: 15,
            bottom: 40,
            left: 45,
            right: 0,
            textStyle: {
              color: "#fff",
            },
          },
          xAxis: [
            {
              type: "category",

              axisTick: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#363e83",
                },
              },
              axisLabel: {
                inside: false,
                textStyle: {
                  color: "#bac0c0",
                  fontWeight: "normal",
                  fontSize: "12",
                },
                rotate: "45",
                // formatter:function(val){
                //     return val.split("").join("\n")
                // },
              },
              data: xData,
            },
            {
              type: "category",
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
              splitArea: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              data: xData,
            },
          ],
          yAxis: {
            type: "value",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#32346c",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#32346c ",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#bac0c0",
                fontWeight: "normal",
                fontSize: "12",
              },
              formatter: "{value}",
            },
          },
          series: [
            {
              // name: '生师比(%)',
              type: "bar",
              itemStyle: {
                normal: {
                  show: true,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#00c0e9",
                    },
                    {
                      offset: 1,
                      color: "#3b73cf",
                    },
                  ]),
                  barBorderRadius: 50,
                  borderWidth: 0,
                },
                emphasis: {
                  shadowBlur: 15,
                  shadowColor: "rgba(105,123, 214, 0.7)",
                },
              },
              zlevel: 2,
              barWidth: "15%",
              data: data,
            },
            {
              name: "",
              type: "bar",
              xAxisIndex: 1,
              zlevel: 1,
              itemStyle: {
                normal: {
                  color: "#121847",
                  borderWidth: 0,
                  shadowBlur: {
                    shadowColor: "rgba(255,255,255,0.31)",
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowOffsetY: 2,
                  },
                },
              },
              barWidth: "15%",
              // data: [30, 30, 30, 30, 30]
            },
          ],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },

    map() {
      // 基于准备好的dom，初始化echarts实例
      this.$nextTick(async () => {
        var banjieList = []
        await this.plugins.user.getRateScrollList().then(res=>{

         res.data.map((item) => {
              banjieList.push(
                Object.assign(item, {
                  bRate: ((item.countStatus_5 / item.countAll) * 100).toFixed(0),
                })
              );
            });
        })
        let myChart = this.$echarts.init(this.$refs.map);
        var mapList = [];
        await this.plugins.user.getMapList().then((res) => {
          mapList = [];

          // 增加比例
          res.data.map((item) => {
            mapList.push(
              Object.assign(item, {
                mRate: ((item.yizoufang / item.zongshu) * 100).toFixed(0),
              })
            );
          });

          mapList.forEach(i => {
              for (let a = 0; a < banjieList.length; a++) {
                const element = banjieList[a];

                if(i.name == element.name){
                    i.sort = element.sort
                    i.bRate = element.bRate,
                    i.countAll = element.countAll,
                    i.countStatus_5 = element.countStatus_5,
                    i.level = element.level,
                    i.parentId = element.parentId
                    break;
                }

                  
              }
               
                 
   
          });
          // console.log(mapList);

          var allCity = [
            { name: "南宁市" },
            { name: "崇左市" },
            { name: "柳州市" },
            { name: "来宾市" },
            { name: "桂林市" },
            { name: "梧州市" },
            { name: "贺州市" },
            { name: "玉林市" },
            { name: "贵港市" },
            { name: "百色市" },
            { name: "钦州市" },
            { name: "河池市" },
            { name: "北海市" },
            { name: "防城港市" },
          ];
          let diffCity = allCity.filter((v) => {
            return mapList.every((e) => e.name != v.name);
          });
          if (diffCity.length) {
            diffCity.forEach((item) => {
              item.mRate = 100;
              item.yizoufang = 0;
              item.zongshu = 0;
            });
          }
          mapList = [...mapList, ...diffCity];

          // 处理颜色
          mapList.forEach((item) => {
            if (+item.mRate <= 20) {
              item.mColor = "#f35a5a";
            } else if (+item.mRate <= 40) {
              item.mColor = "#f5aa75";
            } else if (+item.mRate <= 60) {
              item.mColor = "#EEC900"; //yellow
            } else if (+item.mRate <= 80) {
              item.mColor = "#90def6";
            } else {
              item.mColor = "#4fe891";
            }
          });
        });
        var mapColor = [];
        mapList.forEach((item) => {
          mapColor.push({
            name: item.name, //与china.js对应的省份名称
            itemStyle: {
              areaColor: item.mColor, //省份背景色
            },
          });
        });
        var nameColor = " rgb(55, 75, 113)";
        var name_fontFamily = "宋体";
        var name_fontSize = 35;
        var mapName = "china";
        var data = [];
        var geoCoordMap = {};
        var toolTipData = [];

        /*获取地图数据*/
        myChart.showLoading();
        var mapFeatures = echarts.getMap(mapName).geoJson.features;
        myChart.hideLoading();
        mapFeatures.forEach(function (v) {
          // 地区名称
          var name = v.properties.name;
          // 地区经纬度
          geoCoordMap[name] = v.properties.cp;
          data.push({
            name: name,
            // value: Math.round(Math.random() * 100 + 10)
          });

          let valueMap;
          let notVisit;
          let totalVisit;
          let banjiezong;
          let banjienum;
          let banjielv;
          for (let index = 0; index < mapList.length; index++) {
            let item = mapList[index];
            let baifenbi 
            if(item.bRate == "NaN"){
              baifenbi = "0"
            }else{
              baifenbi=item.bRate
            }
         
            if (name == item.name) {
              totalVisit = item.zongshu;
              valueMap = item.yizoufang;
              banjienum = item.countStatus_5;
              banjielv = baifenbi ? baifenbi : "0";
              banjiezong = item.countAll;
              notVisit = item.zongshu - item.yizoufang;
              break;
            }
          }

          toolTipData.push({
            name: name,
            value: [
              {
                name: "总规上企业数量",
                value: totalVisit,
              },
              {
                name: "已走访规上企业数量",
                value: valueMap,
              },
              {
                name: "未走访规上企业数量",
                value: notVisit,
              },
              {
                name: "办结总数",
                value: banjiezong,
              },
              {
                name: "办结数",
                value: banjienum,
              },
              {
                name:"办结率",
                value: banjielv+"%",

              }
              // {
              //     name: "自治区级政策",
              //     value: Math.round(Math.random() * 100 + 10) + '辆'
              // }
            ],
          });
        });

        var max = 480,
          min = 9; // todo
        var maxSize4Pin = 50,
          minSize4Pin = 20;

        var convertData = function (data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value),
              });
            }
          }
          return res;
        };

        var option = {
          tooltip: {
            trigger: "item",
            formatter: function (params) {
              if (typeof params.value[2] == "undefined") {
                var toolTiphtml = "";
                for (var i = 0; i < toolTipData.length; i++) {
                  if (params.name == toolTipData[i].name) {
                    toolTiphtml += toolTipData[i].name + ":<br>";
                    for (var j = 0; j < toolTipData[i].value.length; j++) {
                      toolTiphtml +=
                        toolTipData[i].value[j].name +
                        ":" +
                        toolTipData[i].value[j].value +
                        "<br>";
                    }
                  }
                }

                return toolTiphtml;
              } else {
                var toolTiphtml = "";
                for (var i = 0; i < toolTipData.length; i++) {
                  if (params.name == toolTipData[i].name) {
                    toolTiphtml += toolTipData[i].name + ":<br>";
                    for (var j = 0; j < toolTipData[i].value.length; j++) {
                      toolTiphtml +=
                        toolTipData[i].value[j].name +
                        ":" +
                        toolTipData[i].value[j].value +
                        "<br>";
                    }
                  }
                }
                return toolTiphtml;
              }
            },
          },

          title: {
            text: "规上企业已走访比例",
            x: "left",
            y: "76%",

            textStyle: {
              fontSize: 14,
              color: "#fff",
              fontWeight: "normal",
            },
          },
          dataRange: {
            x: "left",
            y: "80%",
            splitList: [
              { start: 80, end: 100 },
              { start: 60, end: 80 },
              { start: 40, end: 60 },
              { start: 20, end: 40 },
              { start: 0, end: 20 },
            ],
            color: ["#4fe891", "#90def6", "#e3d060", "#f5aa75", "#f35a5a"],
            // color: ["#4fe891", "#90def6", "#e3d060", "#f5aa75", "#ef8282e9"],

            textStyle: {
              color: "#fff",
            },
          },
          legend: {
            orient: "vertical",
            y: "bottom",
            x: "right",
            data: ["credit_pm2.5"],
            textStyle: {
              color: "#fff",
            },
          },
          visualMap: {
            show: false,
            min: 0,
            max: 600,
            left: "left",
            top: "bottom",
            text: ["高", "低"], // 文本，默认为数值文本
            calculable: true,
            seriesIndex: [1],
            inRange: {
              // color: ['#3B5077', '#031525'] // 蓝黑
              // color: ['#ffc0cb', '#800080'] // 红紫
              // color: ['#3C3B3F', '#605C3C'] // 黑绿
              //  color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
              // color: ['#23074d', '#cc5333'] // 紫红
              //   color: ['#00467F', '#A5CC82'] // 蓝绿
              // color: ['#1488CC', '#2B32B2'] // 浅蓝
              // color: ['#00467F', '#A5CC82','#ffc0cb'] // 蓝绿红
              // color: ['#00467F', '#A5CC82'] // 蓝绿
              // color: ['#00467F', '#A5CC82'] // 蓝绿
              // color: ['#00467F', '#A5CC82'] // 蓝绿
              color: ["#22e5e8", "#0035f9", "#22e5e8"], // 蓝绿
            },
          },
          /*工具按钮组*/
          toolbox: {
            show: false,
            orient: "vertical",
            left: "right",
            top: "center",
            feature: {
              dataView: {
                readOnly: false,
              },
              restore: {},
              saveAsImage: {},
            },
          },
          geo: {
            zoom: 2.3, //大小
            left: "75%", //位置
            top: "60%",

            show: true,
            map: mapName,
            label: {
              normal: {
                show: true,
                color: "#fff",

                // backgroundColor:'red'
              },
              emphasis: {
                show: false,
              },
            },
            roam: true,
            regions: [
              {
                name: "南海诸岛",
                itemStyle: {
                  // 隐藏地图
                  normal: {
                    opacity: 0, // 为 0 时不绘制该图形
                  },
                },
                label: {
                  show: false, // 隐藏文字
                },
              },
              // {
              //    name: '南宁市',//与china.js对应的省份名称
              //    itemStyle: {
              //    areaColor: 'pink',//省份背景色
              //    }
              // }
              ...mapColor,
            ],
            itemStyle: {
              normal: {
                areaColor: "#031525",
                borderColor: "#097bba",
              },
              emphasis: {
                areaColor: "#2B91B7",
              },
            },
          },
          series: [
            {
              name: "散点",
              type: "scatter",
              geoIndex: 0,
              coordinateSystem: "geo",
              data: convertData(data),
              symbolSize: function (val) {
                return val[2] / 10;
              },
              label: {
                normal: {
                  formatter: "{b}",
                  position: "right",
                  show: false,
                },
                emphasis: {
                  show: false,
                },
              },
              itemStyle: {
                normal: {
                  color: "rgba(255,255,0,0.8)",
                },
              },
            },
            {
              type: "map",
              map: mapName,
              geoIndex: 0,
              aspectScale: 0.75, //长宽比
              showLegendSymbol: false, // 存在legend时显示
              label: {
                normal: {
                  show: true,
                },
                emphasis: {
                  show: false,
                  textStyle: {
                    color: "#fff",
                  },
                },
              },
              roam: true,
              itemStyle: {
                normal: {
                  areaColor: "#031525",
                  borderColor: "#3B5077",
                },
                emphasis: {
                  areaColor: "#2B91B7",
                },
              },
              animation: false,
              data: data,
              // data: ['南宁市','崇左市','柳州市','来宾市','桂林市','梧州市','贺州市','玉林市','贵港市','百色市','钦州市','河池市','北海市','防城港市']
            },
            {
              name: "点",
              type: "scatter",
              coordinateSystem: "geo",
              symbol: "pin", //气泡
              symbolSize: function (val) {
                var a = (maxSize4Pin - minSize4Pin) / (max - min);
                var b = minSize4Pin - a * min;
                b = maxSize4Pin - a * max;
                return a * val[2] + b;
              },
              label: {
                normal: {
                  show: false,
                  formatter: function (params) {
                    return params.data.value[2];
                  },
                  textStyle: {
                    color: "#fff",
                    fontSize: 9,
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: "rgba(255,255,0,0)", //标志颜色
                },
              },
              zlevel: 6,
              data: convertData(data),
            },
            {
              name: "Top 5",
              type: "effectScatter",
              coordinateSystem: "geo",
              data: convertData(
                data
                  .sort(function (a, b) {
                    return b.value - a.value;
                  })
                  .slice(0, 5)
              ),
              symbolSize: function (val) {
                return val[2] / 10;
              },
              showEffectOn: "render",
              rippleEffect: {
                brushType: "stroke",
              },
              hoverAnimation: true,
              label: {
                normal: {
                  formatter: "{b}",
                  position: "right",
                  show: true,
                },
              },
              itemStyle: {
                normal: {
                  color: "rgba(255,255,0,0.8)",
                  shadowBlur: 10,
                  shadowColor: "#05C3F9",
                },
              },
              zlevel: 1,
            },
          ],
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option,true);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    echarts_33() {
      // 基于准备好的dom，初始化echarts实例
      this.$nextTick(async () => {
        let myChart = this.$echarts.init(this.$refs.echart33);

        var className = [];
        var classList = [];

        await this.plugins.user.getClass3List().then((res) => {

          res.data[0].nColor = "#cdba00";
          res.data[1].nColor = "#277ace";
          res.data[2].nColor = "#ffc0cb";

          classList = res.data;
          res.data.forEach((item, i) => {
            className.push(item.name);
          });
        });
        // 处理数据
        var listC = [];
        classList.forEach((item) => {
          item.nianList.forEach((n) => {
            item.nianList.push(...Object.values(n));
          });

          item.nianList = item.nianList.slice(12, 24);

          listC.push({
             name: item.name,
             type:"bar",
             data:item.nianList
          });
        });
        var zoufangzong =[]
        listC.forEach(item=>{
            item.data.forEach(i=>{
              zoufangzong.push(i)
            })
            
        })
        var maxzou =Math.max(...zoufangzong);
        var colors = ['#cdba00', '#277ace', '#ffc0cb'];
        var option ={
                color: colors,

                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                grid: {
                    right: '7%',
                    left:'8%',
                    bottom:'18%',
// containLabel: true
                },
            
                legend: {
                    data:className,
                    textStyle: {
                        color:"#fff"
                    },
                    // orient: 'left',
                    x: 'right',
                    textStyle: {
                      fontSize: '12',
                      color: '#fff'
                    },
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                        axisLabel: {
                            formatter: '{value}',
                            color:"#fff"
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '走访数量',
                        min: 0,
                        max: maxzou+maxzou/4,
                        position: 'left',
                        axisLine: {
                            lineStyle: {
                                color:"#0089FF"
                            }
                        },
                        axisLabel: {
                            formatter: '{value}',
                            color:"#fff"
                        },
                        splitLine: {
                          show: true,
                          lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                            color: 'rgba(255, 255, 255, 0)',
                          }
                        },
                    },
              
                ],
                series: listC
            };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option,true);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    zb1(nian) {
      // 基于准备好的dom，初始化echarts实例

      this.$nextTick(() => {
        let myChart = this.$echarts.init(this.$refs.zb1);
        // var v1 = 298//男消费
        var v2 = nian; //女消费
        // var v3 = v1 + v2//总消费
        var option = {
          series: [
            {
              type: "pie",
              radius: ["60%", "70%"],
              color: "#49bcf7",
              label: {
                normal: {
                  position: "center",
                },
              },
              data: [
                {
                  value: v2,
                  name: "女消费",
                  label: {
                    normal: {
                      formatter: v2 + "",
                      textStyle: {
                        fontSize: 20,
                        color: "#fff",
                      },
                    },
                  },
                },
              ],
            },
          ],
        };
        myChart.setOption(option,true);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    zb2(yue) {
      this.$nextTick(() => {
        let myChart = this.$echarts.init(this.$refs.zb2);
        var v1 = yue; //男消费
        // var v2 = 523//女消费
        // var v3 = v1 + v2//总消费
        var option = {
          //animation: false,
          series: [
            {
              type: "pie",
              radius: ["60%", "70%"],
              color: "#cdba00",
              label: {
                normal: {
                  position: "center",
                },
              },
              data: [
                {
                  value: v1,
                  name: "男消费",
                  label: {
                    normal: {
                      formatter: v1 + "",
                      textStyle: {
                        fontSize: 20,
                        color: "#fff",
                      },
                    },
                  },
                },
              ],
            },
          ],
        };
        myChart.setOption(option,true);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    zb3(zhou) {
      this.$nextTick(() => {
        let myChart = this.$echarts.init(this.$refs.zb3);
        var v2 = zhou; 
        // var v2 = Math.random()
        // var v3 = v1 + v2//总消费
        var option = {
          series: [
            {
              type: "pie",
              radius: ["60%", "70%"],
              color: "#62c98d",
              label: {
                normal: {
                  position: "center",
                },
              },
              data: [
                {
                  value: v2,
                  name: "女消费",
                  label: {
                    normal: {
                      formatter: v2 + "",
                      textStyle: {
                        fontSize: 20,
                        color: "#fff",
                      },
                    },
                  },
                },
              ],
            },
          ],
        };
        myChart.setOption(option,true);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
  },
  created() {
    this.echarts_55();
    this.map();
    this.echarts_33();
    this.echarts_5();
    // this.zb1();
    // this.zb2();
    // this.zb3(this.nList);

    this.plugins.user.getscreenData().then((res) => {
      
      this.a =String(res.data.zong).padStart(6,0) ;
      
      this.nList = this.a.split("");
      this.zhou = res.data.zhou; //yue
      this.yue = res.data.yue;
      this.nian = res.data.nian;
      this.zb3(this.zhou);
      this.zb2(this.yue);
      this.zb1(this.nian);
      // 刷新
    });

    setInterval(() => {
           
          setTimeout(() => {
            this.$nextTick(() => {
                  this.plugins.user.getscreenData().then((res) => {
      
                  this.a =String(res.data.zong).padStart(6,0) ;
                  
                  this.nList = this.a.split("");
                  this.zhou = res.data.zhou; //yue
                  this.yue = res.data.yue;
                  this.nian = res.data.nian;
                  this.zb3(this.zhou);
                  this.zb2(this.yue);
                  this.zb1(this.nian);
                  // 刷新
                });
              this.echarts_55();
              this.map();
              this.echarts_33();
              this.echarts_5();
            })
             
          }
          , 0);
     
    }, 60000);

    this.plugins.user.getSubmitScrollData().then((res) => {
      this.submitScrollList = res.data;
      if(res.data.length > 0){
        this.submitScrollList.forEach((item) => {
        switch (item.status) {
          case 1:
            item.status = "待提交";
            break;
          case 2:
            item.status = "已提交";
            break;
          case 3:
            item.status = "已退回";
            break;
          case 4:
            item.status = "处理中";
            break;
          default:
            item.status = "已办结";
            break;
        }
      });
      }
    });

    this.plugins.user.getEndScrollList().then((res) => {
      this.endScrollList = res.data;
      if(res.data.length > 0){
        this.endScrollList.forEach((item) => {
        switch (item.status) {
          case 1:
            item.status = "待提交";
            break;
          case 2:
            item.status = "已提交";
            break;
          case 3:
            item.status = "已退回";
            break;
          case 4:
            item.status = "处理中";
            break;
          default:
            item.status = "已办结";
            break;
        }
      });
      }
    });
    // getRateScrollList
    this.plugins.user.getTimeoutScrollList().then((res) => {
      this.timeoutScrollList = res.data;
      this.timeoutScrollList.forEach((item) => {
        switch (item.status) {
          case 1:
            item.status = "待提交";
            break;
          case 2:
            item.status = "已提交";
            break;
          case 3:
            item.status = "已退回";
            break;
          case 4:
            item.status = "处理中";
            break;
          default:
            item.status = "已办结";
            break;
        }
      });
    });

      // this.plugins.user.getRateScrollList().then((res) => {
      // // console.log(res);
      // this.rateScrollList = [];
      // res.data.map((item) => {
      //   this.rateScrollList.push(
      //     Object.assign(item, {
      //       bRate: (item.countStatus_5 / item.countAll) * 100,
      //     })
      //   );
      // });
    this.plugins.user.getstatisticsOrderFwxznum().then((res) => {
      this.rateScrollList = [];
      res.data.map((item) => {
        this.rateScrollList.push(
          Object.assign(item, {
            bRate: (item.countStatus5 / item.allCount) * 100,
          })
        );
      });

      this.rateScrollList.forEach((item) => {
        if (isNaN(item.bRate)) {
          item.bRate = 0;
        }
      });

      this.rateScrollList.sort(function (a, b) {
        return b.bRate - a.bRate;
      });
    });
  },
};
</script>

<style scoped lang='scss'>
@import "../common/common.css";
/* @import '../common/map.css'; */
.qq{
  color: rgb(86, 229, 86) !important;
}
.ww{
  color: yellow !important;
}
.ee{
  color: #f52929 !important;
}
.zoufangDialog{
  width: 73vw;
  height: 85vh;
  z-index: 9999;
  background: url("../assets/map_bg.png") center;
  // height: 100px;
  border: 1px solid #0947d8;
  box-shadow: 1px 1px 2px 0px rgba(192, 196, 204, 1),
    -1px -1px 2px 0px rgb(31, 89, 206);
}
.cswbjDialog{
    position: absolute;

    width: 73vw;
  height: 85vh;
  z-index: 9999;
  background: url("../assets/map_bg.png") center;
  // height: 100px;
    border: 1px solid #0947d8;

  box-shadow: 1px 1px 2px 0px rgba(192, 196, 204, 1),
    -1px -1px 2px 0px rgb(31, 89, 206);
}
.zxbjwtDialog{
    position: absolute;
   width: 73vw;
  height: 85vh;
  z-index: 9999;
  background: url("../assets/map_bg.png") center;
  // height: 100px;
  border: 1px solid #0947d8;
  box-shadow: 1px 1px 2px 0px rgba(192, 196, 204, 1),
    -1px -1px 2px 0px rgb(31, 89, 206);
}
.zxtjwtDialog{
  position: absolute;
   width: 73vw;
  height: 85vh;
  z-index: 9999;
  background: url("../assets/map_bg.png") center;
  // height: 100px;
  border: 1px solid #0947d8;
  box-shadow: 1px 1px 2px 0px rgba(192, 196, 204, 1),
    -1px -1px 2px 0px rgb(31, 89, 206);
}
.rankDialog {
  width: 73vw;
  height: 85vh;
  z-index: 9999;
  background: url("../assets/map_bg.png") center;
  // height: 100px;
  border: 1px solid #0947d8;
  box-shadow: 1px 1px 2px 0px rgba(192, 196, 204, 1),
    -1px -1px 2px 0px rgb(31, 89, 206);
}
.tihead {
  display: flex;
  align-items: center;
  .title {
    // display: flex;
  }
  .tiright {
    margin-right: 8px;
    color: #fff;
    width: 65px;
    cursor: pointer;
    &:hover {
      color: #0089ff;
    }
  }
}

.dialog {
  // background: #fff;
  position: absolute;
  width: 73vw;
  height: 85vh;
  min-width: 60vw;
  background: url("../assets/map_bg.png") center;
  // height: 100px;
  z-index: 99999;
  border: 1px solid #0947d8;
  box-shadow: 1px 1px 2px 0px rgba(192, 196, 204, 1),
    -1px -1px 2px 0px rgb(31, 89, 206);
  &::before {
    position: absolute;
    display: inline-block;
    content: "";
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    border-left: 2px solid #0947d8;
    border-bottom: 2px solid #0947d8;

    background: linear-gradient(
      45deg,
      #182658,
      #182658 50%,
      transparent 50%,
      transparent 100%
    );

    top: 40px;
    left: -12px;
  }
  .fix-top {
    width: 100%;
    height: 15vh;
  }
  .fix-content {
    display: flex;
    .fix-left {
      width: 57%;
      height: 70vh;
    }
    .fix-right {
      width: 43%;
      height: 70vh;
    }
  }
}

.page-screens {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100vw !important;
  height: 100vh;
  background: white;
  .a {
    width: 100vw;
    height: 100%;
  }
}
html,
body {
  height: 100%;
  width: 100%;
}
.data {
  width: 100%;
  height: 100%;
  background: url("../assets/map_bg.png") center;
  min-width: 1366px;
}
.data > .data-title {
  width: 100%;
  height: 105px;
  padding: 30px 0 35px 0;
  box-sizing: border-box;
}
.data > .data-title > .title-center {
  width: 540px;
  height: 40px;
  box-sizing: border-box;
  border-right: 5px solid #0089ff;
  border-left: 5px solid #0089ff;
  color: #fff;
  text-align: center;
  font-size: 42px;
  line-height: 40px;

  /* background: url("../assets/title.png") no-repeat; */
}
.data > .data-title > .title-left,
.data > .data-title > .title-right {
  width: calc(50% - 270px);
  height: 3px;
  background: #0089ff;
  margin-top: 18px;
}

.data > .data-content {
  width: 100%;
  height: calc(100% - 105px);
  padding: 0 20px 20px 20px;
  box-sizing: border-box;
}
.data > .data-content > .con-left {
  width: 23.4375%;
  height: 100%;
}
.data > .data-content > .con-left > .left-top {
  width: 100%;
  height: calc(75% - 20px);
  margin-bottom: 20px;
  position: relative;
}

.data > .data-content > .con-left > .left-top > .info {
  height: 50%;
  width: 100%;
  border: 1px solid #20558b;
  /*border-radius: 4px;*/
  box-sizing: border-box;
  position: relative;
}

.data > .data-content > .con-left > .left-top > .info > .info-title {
  width: 158px;
  height: 43px;
  background: url("../assets/info-title.png") no-repeat;
  position: absolute;
  top: -22px;
  left: 50%;
  margin-left: -74px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 43px;
  text-align: center;
}
.data > .data-content > .con-left > .left-top > .info > .info-main {
  width: 100%;
  height: 80%;
}
.data > .data-content > .con-left > .left-top > .info > .info-main > div {
  width: 275px;
  height: 25%;
  background: url("../assets/info-text.png") no-repeat;
  margin: 8px auto;
}
.data
  > .data-content
  > .con-left
  > .left-top
  > .info
  > .info-main
  > div.info-1 {
  margin-top: 40px;
}
.data > .data-content > .con-left > .left-top > .info > .info-main .info-img {
  width: 100px;
  height: 60px;
  position: relative;
}
.data
  > .data-content
  > .con-left
  > .left-top
  > .info
  > .info-main
  .info-img
  > img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -24px;
  margin-top: -24px;
}
.data > .data-content > .con-left > .left-top > .info > .info-main .info-text {
  width: 175px;
  height: 70px;
  padding-left: 30px;
  padding-top: 16px;
  box-sizing: border-box;
}
.data
  > .data-content
  > .con-left
  > .left-top
  > .info
  > .info-main
  .info-text
  > p:nth-child(1) {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}
.data
  > .data-content
  > .con-left
  > .left-top
  > .info
  > .info-main
  > .info-1
  > .info-text
  > p:nth-child(2) {
  font-weight: 600;
  color: #ffff44;
  font-size: 22px;
}
.data
  > .data-content
  > .con-left
  > .left-top
  > .info
  > .info-main
  > .info-2
  > .info-text
  > p:nth-child(2) {
  font-weight: 600;
  color: #25f3e6;
  font-size: 22px;
}
.data
  > .data-content
  > .con-left
  > .left-top
  > .info
  > .info-main
  > .info-3
  > .info-text
  > p:nth-child(2) {
  font-weight: 600;
  color: #f84a4a;
  font-size: 22px;
}
.data
  > .data-content
  > .con-left
  > .left-top
  > .info
  > .info-main
  > .info-4
  > .info-text
  > p:nth-child(2) {
  font-weight: 600;
  color: #f5c847;
  font-size: 22px;
}

.data > .data-content > .con-left > .left-top > .top-bottom {
  height: calc(48% - 20px);
  width: 100%;
  background-color: rgba(0, 24, 106, 0.5);
  margin-top: 20px;
  border: 1px solid #20558b;
  box-sizing: border-box;
  position: relative;
}

.data > .data-content > .con-left > .left-bottom {
  width: 100%;
  height: 25%;
  background-color: rgba(0, 24, 106, 0.5);
  border: 1px solid #20558b;
  box-sizing: border-box;
  position: relative;
}
.data > .data-content > .con-center {
  width: 53.125%;
  height: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  position: relative;
}
.data > .data-content > .con-center > .map-num {
  width: 48vw;
  height: 120px;
  position: absolute;
  top: 15px;
  display: flex;
  justify-content: flex-start;
  left: 50px;
  z-index: 1000;
}
.data > .data-content > .con-center > .map-num > .num {
  width: 100px;
  height: 100%;
}
.cander {
  margin-left: auto;
  margin-top: -.5xvw;
  width: 14vw;
  min-width: 100px;
  height: 25vh;
}
.data > .data-content > .con-center > .map-num p {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}
.data > .data-content > .con-center > .map-num .span {
  display: inline-block;
  margin-top: 10px;
  width: 45px;
  height: 65px;
  text-align: center;
  line-height: 65px;
  background-color: #0089ff;
  color: #fff;
  font-size: 68px;
  font-weight: 600;
  font-family: "LcdD";
  margin-top: 15px;
  margin-right: 10px;
}
// .data>.data-content>.con-center>.map-num span:nth-child(2),
// .data>.data-content>.con-center>.map-num span:nth-child(6){
//     background-color: transparent;
//     width: 30px;
// }

.data > .data-content > .con-center > .cen-top {
  width: 100%;
  height: calc(75% - 20px);
  margin-bottom: 20px;
  /*background-color: rgba(0,24,106,0.3);*/
  /*border: 1px solid #0089ff;*/
  /*border-radius: 4px;*/
  /*box-sizing: border-box;*/
}

.data > .data-content > .con-center > .cen-bottom {
  width: 100%;
  height: 25%;
  background-color: rgba(0, 24, 106, 0.5);
  border: 1px solid #20558b;
  box-sizing: border-box;
  position: relative;
}

.data > .data-content > .con-right {
  width: 23.4375%;
  height: 100%;
  position: relative;
}
.data > .data-content > .con-right > .right-top {
  width: 100%;
  height: 32%;
  background-color: rgba(0, 24, 106, 0.5);
  border: 1px solid #20558b;
  box-sizing: border-box;
  // position: relative;
}
.data > .data-content > .con-right > .right-top > .title {
 display: flex;
 justify-content: space-between;
}
.data > .data-content > .con-right > .right-center > .title {
 display: flex;
 justify-content: space-between;
}
.data > .data-content > .con-right > .right-bottom > .title {
 display: flex;
 justify-content: space-between;
}
.data > .data-content > .con-right > .right-top > .title > .tilx {
    margin-right: 12px;
}

.data > .data-content > .con-right > .right-center > .title > .tilx {
    margin-right: 12px;
}

.data > .data-content > .con-right > .right-bottom > .title > .tilx {
    margin-right: 12px;
}

.data > .data-content > .con-right > .right-top > .title > .tilx:hover {
    color: #0089ff;
    cursor: pointer;
}

.data > .data-content > .con-right > .right-center > .title > .tilx:hover {
    color: #0089ff;
    cursor: pointer;
}
.data > .data-content > .con-right > .right-bottom > .title > .tilx:hover {
    color: #0089ff;
    cursor: pointer;
}
.data > .data-content > .con-right > .right-center {
  width: 100%;
  height: calc(36% - 40px);
  margin: 20px 0;
  background-color: rgba(0, 24, 106, 0.5);
  border: 1px solid #20558b;
  box-sizing: border-box;
  position: relative;
}
.data > .data-content > .con-right > .right-bottom {
  width: 100%;
  height: 32%;
  background-color: rgba(0, 24, 106, 0.5);
  border: 1px solid #20558b;
  box-sizing: border-box;
  position: relative;
}

.data > .data-content .title {
  height: 35px;
  line-height: 35px;
  width: 100%;
  color: #fff;
  font-weight: 600;
  padding-left: 15px;
  box-sizing: border-box;
}
.data > .data-content .charts {
  width: 100%;
  height: calc(100% - 35px);
  // overflow: auto;
}

.data > .data-content img.bj-1 {
  position: absolute;
  left: -1px;
  top: -1px;
}
.data > .data-content img.bj-2 {
  position: absolute;
  right: -1px;
  top: -1px;
}
.data > .data-content img.bj-3 {
  position: absolute;
  right: -1px;
  bottom: -1px;
}
.data > .data-content img.bj-4 {
  position: absolute;
  left: -1px;
  bottom: -1px;
}

.pulll_right {
  float: right;
}

.zhibiao {
  height: 100%;
  width: 35%;
}
.zb1,
.zb2,
.zb3 {
  float: left;
  width: 33.333%;
  height: 100%;
}
#zb1,
#zb2,
#zb3 {
  height: calc(100% - 30px);
}
.zhibiao span {
  // width: 90px;
  width: 100%;
  // padding-top: 15px;
  display: block;
  text-align: center;
  color: #fff;
  font-size: 14px;
}

/* 事项分类统计 */
/* .boxall{ padding:15px;  background: rgba(0,0,0,.2); position: relative; margin-bottom:15px;; z-index: 10;}
.alltitle{ font-size:18px; color:#fff; position: relative; padding-left: 12px;margin-bottom: 10px;}
.alltitle:before{ width: 5px; height: 20px; top:2px; position: absolute; content: ""; background: #49bcf7; border-radius:20px; left: 0; } */
.navboxall {
  margin-top: 26px;
  margin-left: 6px;
  height: calc(100% - 30px);
}

/* 半截 */
.navboxall {
  height: calc(100% - 30px);
}

/* 表格 */

.table1 {
  margin-left: 10px;
  width: 94%;
  // height:20%; overflow: hidden;
}

.table1 .seamless-warp {
  height: 20%;
  overflow: hidden;
  margin-top: 10px;
}

.table1 th {
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: normal;
  padding: 0 0 10px 0;
}
.table1 td {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.4);
  padding: 12px 0 0 0;
  margin-left: 10px;
}
.table1 span {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  display: block;
  background: #878787;
  color: #fff;
  line-height: 24px;
  text-align: center;
}

.table1 tr:nth-child(2) span {
  background: #ed405d;
}
.table1 tr:nth-child(3) span {
  background: #f78c44;
}
.table1 tr:nth-child(4) span {
  background: #49bcf7;
}

/* 事项完结 */
// .wrap{ height:60%; overflow: hidden;}
// .wrap li{  line-height:40px; height:40px; }
// .wrap li p,.wraptit{ font-size: 0; }
// .wrap li span,.wraptit span{ display: inline-block; font-size: 18px;color: rgba(255,255,255,.6);}
// .wraptit { border-bottom: 1px solid rgba(255,255,255,.2); padding:0 0 10px 0; margin-bottom: 10px;}
// .wrap li span:nth-child(1),.wraptit span:nth-child(1){ width: 30%}
// .wrap li span:nth-child(2),.wraptit span:nth-child(2){ width: 20%}
// .wrap li span:nth-child(3),.wraptit span:nth-child(3){ width: 20%}
// .wrap li span:nth-child(4),.wraptit span:nth-child(4){ width: 30%}

/* 全部 */

.table1 th {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: normal;
  padding: 0 0 10px 0;
  width: 20px;
}
.table1 td {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.4);
  padding: 12px 0 0 0;
}
.table1 span {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  display: block;
  background: #878787;
  color: #fff;
  line-height: 24px;
  text-align: center;
}

.table1 tr:nth-child(2) span {
  background: #ed405d;
}
.table1 tr:nth-child(3) span {
  background: #f78c44;
}
.table1 tr:nth-child(4) span {
  background: #49bcf7;
}
/*Plugin CSS*/

.wrap {
  height: calc(100% - 100px);
  overflow: hidden;
  padding: 0 15px;
  box-sizing: border-box;
}
.wrap li {
  line-height: 40px;
  height: 40px;
  list-style-type: none;
}
.wrap li p,
.wraptit {
  font-size: 0;
}
.wrap li span,
.wraptit span {
  display: inline-block;
  font-size: 16px;
  color: white
}
.wraptit {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0 0 10px 15px;
  margin-bottom: 10px;
}
.wrap li span:nth-child(1),
.wraptit span:nth-child(1) {
  width: 20%;
}
.wrap li span:nth-child(2),
.wraptit span:nth-child(2) {
  width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 17px;
}
.wrap li span:nth-child(3),
.wraptit span:nth-child(3) {
  width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 17px;
}

.wrap li > .col,
.wraptit > .col {
  width: 20%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 17px;
}

.seamlessWarp {
  margin-top: 10px;
  height: calc(100% - 90px);
  overflow: hidden;
  .liStyle {
    height: 40px;
    line-height: 40px;
    width: 100%;
    display: flex; //设置flex布局，否则span标签无法设置宽度
    //设置宽度与表头列宽一致
    .title1 {
      width: 20%;
      font-size: 16px;
      // color: rgba(255, 255, 255, 0.4);
      color: white;
    }
    .title1:nth-child(1) {
      margin-top: 8px;
      width: 15%;
      .fTitle {
        width: 24px;
        height: 24px;
        border-radius: 3px;
        display: block;
        background: #878787;
        color: #fff;
        line-height: 24px;
        text-align: center;
        margin: 0 50px 0 10px;
      }
    }
    .title1:nth-child(2){
      width: 30%;
      text-align: center;
    }
    .title1:nth-child(3){
      width: 15%;
    }
    // .text_align { text-align: center; }
  }
}
</style>